<template>
  <div>
    <div id="sidebar" class="flex direction-column"
         :class="`${collapsedEffect.class} ${invisibleEffect.class}`">
      <slot></slot>
      <div class="sidebar-toggle pointer flex align-items-center none-select"
           @click="toggleSidebar">
        <svg-icon :icon-name="invisibleEffect.icon || collapsedEffect.icon"
                  class="shrink-0"></svg-icon>
        <span class="collapse-hide m-l-10">{{ invisibleEffect.cn || collapsedEffect.cn }}</span>
      </div>
    </div>
    <div v-if="invisibleSidebar && !sidebarCollapsed"
         id="sidebar-shade" @click="toggleSidebar"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'Sidebar',
  computed: {
    ...mapState(['sidebarCollapsed', 'invisibleSidebar']),
    collapsedEffect() {
      if (this.sidebarCollapsed) {
        return { class: 'is-collapsed', icon: 'gitlab_angle-double-right', cn: '' };
      } return { class: '', icon: 'gitlab_angle-double-left', cn: '收起侧边栏' };
    },
    invisibleEffect() {
      if (this.invisibleSidebar) {
        return { class: 'invisible-sidebar', icon: 'gitlab_close', cn: '关闭侧边栏' };
      } return { class: '', icon: '', cn: '' };
    },
  },
  methods: {
    ...mapActions(['setSidebarCollapsed', 'setInvisibleSidebar']),
    // 侧边栏折叠
    toggleSidebar() { this.setSidebarCollapsed(!this.sidebarCollapsed); },
    // 监听屏幕大小，自动折叠侧边栏 // 已经移动到 App.vue 中了
  },
  watch: {
    // 当路由变化，并且是小屏幕下时，关闭侧边栏
    $route() { if (this.invisibleSidebar) this.setSidebarCollapsed(true); },
  },
};
</script>

<style lang="scss">
@import '~@/assets/scss/values.scss';

.page-with-sidebar {
  padding-left: $sidebar-width;
  transition: padding .3s,left .3s;
  &.sidebar-collapsed { padding-left: $sidebar-collapsed-width; }
  &.invisible-sidebar { padding-left: 0 !important; }
}

#sidebar {
  box-sizing: border-box;
  position: fixed;
  top: $header-height + $header-shadow-blur;
  @media screen and (max-width: $sm) { top: $min-header-height + $header-shadow-blur; }
  left: 0; bottom: 0;
  z-index: $sidebar-z-index;
  color: #707070;
  width: $sidebar-width;
  background-color: #fafafa;
  border-right: 2px solid #e4e7ed;
  transition: width .3s, left .3s;
  overflow: hidden;

  .collapse-hide { white-space: nowrap; }

  &.is-collapsed {
    width: $sidebar-collapsed-width;
    .collapse-hide { display: none; }
    .sidebar-title { padding: .625rem .5rem; }
  }
  &.is-collapsed.invisible-sidebar {
    width: $sidebar-width !important; // 小屏幕下采用移入移出的方式，而不是折叠
    left: -$sidebar-width;
  }

  .sidebar-toggle {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3rem; // 收起时没有文字，撑不起高度，需要固定
    line-height: 3rem;
    padding: 0 1.25rem;
    border-top: 2px solid #e4e7ed;
    background-color: inherit;

    &:hover { background-color: #e5e5e5; }
  }

  .sidebar-item {
    &:hover { background-color: $sidebar-item-hover; }
    &:active { background-color: $sidebar-item-active; }
  }
  .sidebar-title {
    padding: .625rem 1rem;
    transition: padding .3s,left .3s;
    flex-shrink: 0;

    .title-icon {
      height: 2.5rem;
      width: 2.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: #fff;
    }
  }
  a.sidebar-title { @extend .sidebar-item; } // 能点的才继承颜色

  svg { font-size: 1rem; }
}

#sidebar-shade {
  position: fixed;
  top: $header-height + $header-shadow-blur;
  @media screen and (max-width: $sm) { top: $min-header-height + $header-shadow-blur; }
  left: 0; right: 0; bottom: 0;
  z-index: $sidebar-shade-z-index;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
